<template>
	<view>
		<view class="suspension" v-if="isShowDialog" @click="isShowDialog=false">
			<view class="box">
				<image src="../../static/icon/success_icon.png" style="width: 136rpx; height: 136rpx;"></image>
				<view style="font-weight: 400; font-size: 111%;">恭喜您预约成功</view>
			</view>
		</view>
		<view>
			<image src="../../static/common/yuyue.png" mode="widthFix" class="appiont"></image>
		</view>
		<view class="input">
			<text style="margin-left: 40rpx;opacity: 0.8;font-size:111%; margin-top: 10rpx;">楼盘名称</text>
			<input class="inputext" placeholder="请输入楼盘名称" type="text">
		</view>
		<view class="input">
			<text style="margin-left: 40rpx;opacity: 0.8;font-size:111%; margin-top: 10rpx;">预约类型</text>
			<picker class="appoint-picker" mode="selector" :range="list" :index='index' @change="change">
				<view class="inputext">{{list[index]}}</view>
			</picker>
			<image class="inpuicon" src="../../static/icon/right_icon.png" mode="widthFix"></image>
		</view>

		<view class="input">
			<text
				style="margin-left: 40rpx;opacity: 0.8;font-size:111%; margin-top: 10rpx;">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</text>
			<input class="inputext" placeholder="请输入户型" type="text">
			<text class="inpuicon" style="opacity: 0.5;padding-right: 40rpx;padding-bottom: 20rpx;">(m²)</text>
		</view>

		<view class="input">
			<text
				style="margin-left: 40rpx;opacity: 0.8;font-size:111%; margin-top: 10rpx;">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</text>
			<input class="inputext" placeholder="请输入姓名" type="text">
		</view>

		<view class="input">
			<text style="margin-left: 40rpx;opacity: 0.8;font-size:111%; margin-top: 10rpx;">联系方式</text>
			<input class="inputext" placeholder="请输入联系号码" type="text">
		</view>

		<view class="input">
			<text style="margin-left: 40rpx;opacity: 0.8;font-size:111%; margin-top: 10rpx;">微信号码</text>
			<input class="inputext" placeholder="请输入微信号码" type="text">
		</view>

		<view>
			<button class="button-style" @click="isShowDialog=true">
				<text style="color: white;">确定预约</text>
			</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowDialog:false,
				index: 0,
				list: ['验房', '微改报价', '设计', '拎包入住']
			}
		},
		methods: {
			change: function(e) {
				this.index = e.target.value
			}
		}
	}
</script>

<style>
	.appiont {
		width: 750rpx;
		height: 250rpx;
	}

	.input {
		margin-top: 20rpx;
		display: flex;
		box-sizing: border-box;
		position: relative;
	}

	.inputext {
		margin-right: 72rpx;
		background-color: white;
		padding-left: 22rpx;
		padding-right: 22rpx;
		flex: 1; //前面宽度固定,剩下的填充
		height: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #ccc;
		border-radius: 8rpx;
		margin-left: 40rpx;
	}

	.inpuicon {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 92rpx;
		width: 20rpx;
		height: 20rpx;
	}

	.button-style {
		background-color: green;
		width: 328rpx;
		height: 80rpx;
		margin-top: 60rpx;
		line-height: 80rpx;
	}

	.appoint-picker {
		flex: 1;
	}

	.suspension {
		display: flex;
		position: fixed;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100vh;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.box {
		width: 300rpx;
		height: 228rpx;
		background-color: white;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>